import {FC, memo} from "react";
import {Tag} from "antd-mobile";
import {computedJF, getPrice} from "@/utils";
import "./line.less";

interface TProps {
    data: any[];
    className?: string;
    onGoDetail?: (val: any) => void;
}

const ShopIcon = memo(({type}: any) => {
    let tit = "";
    //0表示淘宝，1表示天猫，3表示特价版
    let name = "yq-icon";
    if (type == 0) {
        name += "tao";
        tit = "淘宝";
    } else if (type == 1) {
        name += "tianmaot";
        tit = "天猫";
    } else {
        name += "tejia";
        tit = "特价商品";
    }
    return <Tag color="danger">{tit}</Tag>;
});

const GoodsLine: FC<TProps> = ({data, className, onGoDetail}: TProps) => {
    const computerNum = (params: any) => {
        const num = Number(params);
        let n = 10000;
        if (num > n) {
            return Number(num / n) + "w+";
        } else {
            return num;
        }
    };
    return (
        <div className={`goods-components ${className}`}>
            {data.map(item => {
                return (
                    <div
                        className="goods-item br"
                        key={item.item_id + item.volume}
                        onClick={() => onGoDetail && onGoDetail(item)}
                    >
                        <img className="image" src={item.pict_url} />
                        <div className="goods-card">
                            <div>
                                <div className="title">
                                    <ShopIcon type={item.user_type} />
                                    &nbsp;{item.title}
                                </div>
                                <div className="fl shop-name ">
                                    {/* <Icon name="shop" size={12}></Icon> */}
                                    <div className=" shop-tit txt-1">{item.shop_title}</div>
                                </div>
                            </div>
                            <div>
                                <div className="price fl">
                                    <div className="flex">
                                        <div className="p">￥</div>
                                        {getPrice(item.zk_final_price, item.coupon_amount)}
                                    </div>
                                    <div className="volume">月销量{computerNum(item.volume)}</div>
                                </div>

                                <div>
                                    {!!item.coupon_amount && (
                                        <>
                                            <Tag color="#ef180c">{item.coupon_amount}元券</Tag>
                                        </>
                                    )}

                                    {!!item.coupon_info && <Tag color="#ef180c">{item.coupon_info}</Tag>}
                                    <>
                                        &nbsp;
                                        <Tag color="#ef180c">
                                            返：
                                            {computedJF(
                                                getPrice(item.zk_final_price, item.coupon_amount),
                                                item.commission_rate
                                            )}
                                        </Tag>
                                    </>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
};

export default GoodsLine;
